<template>
  <el-card>
    <div style="padding: 30px 30px 30px 150px; width: 60vw">
      <PlusForm
        v-model="formValues"
        style="max-width: 600px"
        label-width="auto"
        label-position="top"
        size="large"
        :columns="columns"
        :rules="rules"
        @submit="formSubmit"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { type Ref, ref, computed, h, Fragment } from "vue";
import type { PlusColumn, FieldValues, OptionsRow } from "plus-pro-components";
import { ElUpload, ElButton, ElAvatar } from "element-plus";
import { getToken, formatToken } from "@/utils/auth";
import { message } from "@/utils/message";
import { useUserStoreHook } from "@/store/modules/user";
import { getProfile, updateProfile } from "@/api/zhaoyuan";
import { storageLocal } from "@pureadmin/utils";
import { userKey } from "@/utils/auth";
const { token } = getToken();

const rules = {
  oldPassword: [
    {
      required: true,
      message: "请输入旧密码"
    }
  ],
  newPassword: [
    {
      required: true,
      message: "请输入新密码"
    }
  ]
};

const columns: PlusColumn[] = [
  {
    label: "旧密码",
    prop: "oldPassword"
  },
  {
    label: "新密码",
    prop: "newPassword"
  }
];
const formValues = ref<FieldValues>({
  oldPassword: "",
  newPassword: ""
});

getProfile().then(res => {
  formValues.value = res.profile;
});

const formSubmit = () => {
  updateProfile(formValues.value).then(res => {
    message("更新成功", { type: "success" });
  });
};
</script>
